<template>
  <div>
    <div class="wrapper">
      <!-- 面包屑 -->
      <div class="c1">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
          <el-breadcrumb-item :to="{ path: '/backstage/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
      <div class="add_style"><el-link icon="el-icon-edit" type="primary" @click="addUser">添加用户</el-link></div>
    </div>

    <el-card shadow="hover">
      <!-- 搜索表单 -->
      <el-form inline  :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName" prefix-icon="el-icon-user" clearable></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input prefix-icon="el-icon-document" v-model="ruleForm.account" clearable ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
          <el-button icon="el-icon-help" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- table -->
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading = "pictLoading"
      >
        <el-table-column
          label="姓名"
          prop="name"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="account"
          align="center"
          label="账号"
          width="120">
        </el-table-column>

        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
          width="120">
        </el-table-column>

        <el-table-column
          prop="email"
          label="邮箱"
          align="center"
          width="150">
        </el-table-column>

        <el-table-column
          sortable
          prop="date"
          label="日期"
          align="center"
          width="180">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="info"
              plain
              size="mini"
              @click="detail(scope.$index, scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm confirm-button-text='确定'
                         cancel-button-text='取消'
                         icon="el-icon-info"
                         icon-color="red"
                         title="确定删除这个用户吗？"
                         @confirm="deleteUser(scope.row.aid)">
              <el-button type="danger" size="mini" slot="reference" plain>删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageRow"
        :total="total"
        @current-change="page">
      </el-pagination>

      <!-- 详情页面dialog -->
      <Dialog :show.sync="show" v-bind:detailRow="detailRow"/>

      <!-- 点击编辑或添加弹出dialog -->
      <DialogEdit  :show.sync="showEdit" v-bind:detailRow="detailRow"/>

    </el-card>

  </div>
</template>

<script>
import Dialog from '../../../components/user/Dialog.vue'
import DialogEdit from '../../../components/user/DialogEdit.vue'
import { getUserListClickQuery } from '../../../api/backstage'
import { getStore } from '../../../storage/storage'
import { delUser } from '../../../api/userManage/index'
export default {
  name: "UserList",
  components: { Dialog, DialogEdit },
  data() {
    return {
      pictLoading:true,
      tableData: [],
      ruleForm:{
          account: '',
          userName: '',
      },
      pageRow: 5,
      total: 100,
      show: false, // 详情页面弹窗显示
      showEdit: false, // 点击编辑弹窗显示
      detailRow: {}, // 点击详情之后每一行的数据 是个对象
    }
  },
  methods: {

    // 提交表单
    submitForm(){
        // 发送请求
        const params = {
            adminAccount: getStore("account"),
            account: this.ruleForm.account,
            userName: this.ruleForm.userName,
            page: 1,  
            pageRow: this.pageRow, // 每页行数
        }
        getUserListClickQuery(params).then(res=>{
          this.tableData = res.data.data.userList
          this.total = res.data.data.totalNum
        })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.submitForm();
    },

    handleEdit(index, row) {
      this.showEdit = true;
      this.detailRow = row;
    },

    detail(index,row){
      this.show = true;
      this.detailRow = row;
    },

    deleteUser(aid) {
      const params = {
        aid: aid,
      }
      delUser(params).then(res=>{
        console.log(res);
        this.$message({
              duration: 2000,
              message: res.data.message,
              type: "success",
            });
        window.location.reload(); // 刷新一下
      }).catch(err=>{
        this.$message({
              duration: 2000,
              message: res.data.message,
              type: "err",
            });
      })
    },
    page(currentPage){
       // 发送请求
      const params = {
          adminAccount: getStore("account"),
          account: this.ruleForm.account,
          userName: this.ruleForm.userName,
          page: currentPage,  
          pageRow: this.pageRow, // 每页行数
      }
      getUserListClickQuery(params).then(res=>{
        this.tableData = res.data.data.userList
        this.total = res.data.data.totalNum
      })
    },
    addUser(){
      this.showEdit = true;
    }
  },

  created(){
    // 发送请求
    const params = {
        adminAccount: getStore("account"),
        account: this.ruleForm.account,
        userName: this.ruleForm.userName,
        page: 1, // 页面初始化完成之后默认查询第一页
        pageRow: this.pageRow, // 每页行数
    }
    getUserListClickQuery(params).then(res=>{
      // console.log(res);
      this.pictLoading = true;
      this.tableData = res.data.data.userList
      this.total = res.data.data.totalNum
      setTimeout(() => {
        this.pictLoading = false;
      }, 700);
    })
  }
 
}
</script>

<style scoped>
.add_style{
  float: right;
}
.wrapper{
  overflow: auto;
}
.c1{
  float: left;
}
</style>